<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="description" content="">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- The above 4 meta tags *must* come first in the head; any other head content must come *after* these tags -->

    <!-- Title -->
    <title>Original - Lifestyle Blog Template</title>

    <!-- Favicon -->
    <link rel="icon" href="img/material/icon.jpg">

    <!-- Style CSS -->
    <link rel="stylesheet" href="style.css">

    <link rel="stylesheet" href="css/diaries.css">

    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1881993_k4kntc3cm5.css">

</head>

<body>
    <!-- Preloader -->
    <div id="preloader">
        <div class="preload-content">
            <div id="original-load"></div>
        </div>
    </div>

    <!-- Subscribe Modal -->
    <div class="subscribe-newsletter-area">
        <div class="modal fade" id="subsModal" tabindex="-1" role="dialog" aria-labelledby="subsModal"
            aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <div class="modal-body">
                        <h5 class="title">Subscribe to my newsletter</h5>
                        <form action="#" class="newsletterForm" method="post">
                            <input type="email" name="email" id="subscribesForm2" placeholder="Your e-mail here">
                            <button type="submit" class="btn original-btn">Subscribe</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Header Area Start -->
    <header class="header-area">
        <!-- Top Header Area -->
        <div class="top-header">
            <div class="container h-100">
                <div class="row h-100 align-items-center">
                    <!-- Breaking News Area -->
                    <div class="col-12 col-sm-8">
                        <div class="breaking-news-area">
                            <div id="breakingNewsTicker" class="ticker">
                                <ul>
                                    <li><a href="#">Hello World!</a></li>
                                    <li><a href="#">Hello Universe!</a></li>
                                    <li><a href="#">Hello Original!</a></li>
                                    <li><a href="#">Hello Earth!</a></li>
                                    <li><a href="#">Hello Colorlib!</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <!-- Top Social Area -->
                    <div class="col-12 col-sm-4">
                        <div class="top-social-area">
                            <h5>手动@全世界第一乖林小乖</h5>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Logo Area -->
        <div class="logo-area text-center">
            <div class="container h-100">
                <div class="row h-100 align-items-center">
                    <div class="col-12">
                        <a href="index.html"><img src="img/font/pic4.png" alt=""style="display:none;"class="font"></a>
                    </div>
                </div>
            </div>
        </div>
        <img src="img/font/pic4.png" alt="" class="original-logo">

        <!-- Nav Area -->
        <div class="original-nav-area" id="stickyNav">
            <div class="classy-nav-container breakpoint-off">
                <div class="container">
                    <!-- Classy Menu -->
                    <nav class="classy-navbar justify-content-between">

                        <!-- Subscribe btn -->
                        <div class="subscribe-btn">
                            <a href="#" class="btn subscribe-btn" data-toggle="modal"
                                data-target="#subsModal">Subscribe</a>
                        </div>

                        <!-- Navbar Toggler -->
                        <div class="classy-navbar-toggler">
                            <span class="navbarToggler"></span>
                        </div>

                        <!-- Menu -->
                        <div class="classy-menu" id="originalNav">
                            <!-- close btn -->
                            <div class="classycloseIcon">
                                <div class="cross-wrap"><span class="top"></span><span class="bottom"></span></div>
                            </div>

                            <!-- Nav Start -->
                            <div class="classynav">
                                <ul>
                                    <li><a href="login.html">login</a>
                                    <li><a href="index.html">Home</a></li>
                                    <li><a href="blog.html">blog</a></li></li>
                                    <li><a href="diaries.html">DIARIES</a></li>
                                    <li><a href="friendshiplink.html">friendshiplink</a></li>
                                    <li><a href="comments.html">comments</a></li>
                                </ul>

                                <!-- Search Form  -->
                                <div id="search-wrapper"> 
                                    <form action="#">
                                        <input type="text" id="search" placeholder="Search something...">
                                        <div id="close-icon"></div>
                                        <input class="d-none" type="submit" value="">
                                    </form>
                                </div>
                            </div>
                            <!-- Nav End -->
                        </div>
                    </nav>
                </div>
            </div>
        </div>
    </header>
    <!-- ##### Header Area End ##### -->
    <!-- ##### Container Area Start ##### -->
    <div class="container-blog">
        <!-- <div class="container-fixed"> -->
            <div class="timeline-box shadow">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-lvzhi13"></use>
                </svg>
                <h1><i class="iconfont" style="font-size:50px">&#xe62d;</i>xiaolin</h1>
                <div class="timeline-line"> </div>
                <div class="time-year">
                    <h2><a href="" style="font-size:40px">2020年</a></span></h2>
                    <div class="timeline-month">
                        <ul>
                            <li class="first">
                                <div class="h4 animated fadeInUp  wow " data-wow-delay="0.7s"
                                    data-wow-duration="1000ms">
                                    <p class="date">06月12日</p>
                                </div>
                                <p class="dot-circle animated "><span class="iconfont first-icon">&#xe62e;</span></p>
                                <div class="content animated fadeInRight first-div  wow " data-wow-delay="0.7s"
                                    data-wow-duration="1000ms">
                                    <p>做前端的快咯</p>
                                    <p><img src="img/material/pic3.png" alt=""></p>
                                </div>
                            </li>
                            <li class="second">
                                <div class="h4 animated fadeInLeft  wow " data-wow-delay="0.7s"
                                    data-wow-duration="1000ms">
                                    <p class="date">06月01日</p>
                                </div>
                                <p class="dot-circle animated "><span class="iconfont">&#xe62e;</span></p>
                                <div class="content animated fadeInRight   wow second-div" data-wow-delay="0.7s"
                                    data-wow-duration="1000ms">儿童节快乐呀</div>
                                <div class="clear"></div>
                            </li>
                            <li>
                                <div class="h4 animated fadeInLeft  wow " data-wow-delay="0.7s"
                                    data-wow-duration="1000ms">
                                    <p class="date">05月21日</p>
                                </div>
                                <p class="dot-circle animated "><span class="iconfont">&#xe62e;</span></p>
                                <div class="content animated fadeInRight third-div  wow " data-wow-delay="0.7s"
                                    data-wow-duration="1000ms">
                                    <p>返校啦~</p>
                                    <p><img src="img/material/pic4.png" alt=""></p>
                                </div>
                                <div class="clear"></div>
                            </li>
                            <li class="fourth">
                                <div class="h4 animated fadeInLeft  wow " data-wow-delay="0.7s"
                                    data-wow-duration="1000ms">
                                    <p class="date">04月18日</p>
                                </div>
                                <p class="dot-circle animated "><span class="iconfont">&#xe62e;</p>
                                <div class="content animated fadeInRight  wow " data-wow-delay="0.7s"
                                    data-wow-duration="1000ms">包了饺子~</div>
                                <div class="clear"></div>
                            </li>
                            <li>
                                <h1><i class="iconfont " style="font-size:50px">&#xe630;</i>THE END</h1>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

        </div>

    </div>
    <!-- ##### Container Area End ##### -->

    <div class="instagram-feed-area">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="insta-title">
                        <h5>手动@全世界第一大可爱林小乖</h5>
                    </div>
                </div>
            </div>
        </div>
        <!-- Instagram Slides -->
        <div class="instagram-slides owl-carousel">
            <!-- Single Insta Feed -->
            <div class="single-insta-feed">
                <img src="img/instagram-img/1.png" alt="">
                <!-- Hover Effects -->
                <div class="hover-effects">
                    <a href="#" class="d-flex align-items-center justify-content-center"><i
                            class="fa fa-instagram"></i></a>
                </div>
            </div>
            <!-- Single Insta Feed -->
            <div class="single-insta-feed">
                <img src="img/instagram-img/2.png" alt="">
                <!-- Hover Effects -->
                <div class="hover-effects">
                    <a href="#" class="d-flex align-items-center justify-content-center"><i
                            class="fa fa-instagram"></i></a>
                </div>
            </div>
            <!-- Single Insta Feed -->
            <div class="single-insta-feed">
                <img src="img/instagram-img/3.png" alt="">
                <!-- Hover Effects -->
                <div class="hover-effects">
                    <a href="#" class="d-flex align-items-center justify-content-center"><i
                            class="fa fa-instagram"></i></a>
                </div>
            </div>
            <!-- Single Insta Feed -->
            <div class="single-insta-feed">
                <img src="img/instagram-img/4.png" alt="">
                <!-- Hover Effects -->
                <div class="hover-effects">
                    <a href="#" class="d-flex align-items-center justify-content-center"><i
                            class="fa fa-instagram"></i></a>
                </div>
            </div>
            <!-- Single Insta Feed -->
            <div class="single-insta-feed">
                <img src="img/instagram-img/5.png" alt="">
                <!-- Hover Effects -->
                <div class="hover-effects">
                    <a href="#" class="d-flex align-items-center justify-content-center"><i
                            class="fa fa-instagram"></i></a>
                </div>
            </div>
            <!-- Single Insta Feed -->
            <div class="single-insta-feed">
                <img src="img/instagram-img/6.png" alt="">
                <!-- Hover Effects -->
                <div class="hover-effects">
                    <a href="#" class="d-flex align-items-center justify-content-center"><i
                            class="fa fa-instagram"></i></a>
                </div>
            </div>
            <!-- Single Insta Feed -->
            <div class="single-insta-feed">
                <img src="img/instagram-img/7.png" alt="">
                <!-- Hover Effects -->
                <div class="hover-effects">
                    <a href="#" class="d-flex align-items-center justify-content-center"><i
                            class="fa fa-instagram"></i></a>
                </div>
            </div>
        </div>
    </div>
    <!-- ##### Instagram Feed Area End ##### -->

    <!-- ##### Footer Area Start ##### -->
    <footer class="footer-area text-center">
        <div class="container">
            <div class="row">
                <div class="col-12">

                    <!-- Footer Nav Area -->
                    <div class="classy-nav-container breakpoint-off">
                        <!-- Classy Menu -->
                        <nav class="classy-navbar justify-content-center">

                            <!-- Navbar Toggler -->
                            <div class="classy-navbar-toggler">
                                <span class="navbarToggler"><span></span><span></span><span></span></span>
                            </div>

                            <!-- Menu -->
                            <div class="classy-menu">

                                <!-- close btn -->
                                <div class="classycloseIcon">
                                    <div class="cross-wrap"><span class="top"></span><span class="bottom"></span></div>
                                </div>

                                <!-- Nav Start -->
                                <div class="classynav">
                                    <ul>
                                        <li><a href="#">Home</a></li>
                                        <li><a href="#">About Us</a></li>
                                        <li><a href="#">Lifestyle</a></li>
                                        <li><a href="#">travel</a></li>
                                        <li><a href="#">Music</a></li>
                                        <li><a href="#">Contact</a></li>
                                    </ul>
                                </div>
                                <!-- Nav End -->
                            </div>
                        </nav>
                    </div>

                    <!-- Footer Social Area -->
                    <div class="footer-social-area mt-30">

                    </div>
                </div>
            </div>
        </div>

        <!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
        <!-- Copyright &copy;<script>document.write(new Date().getFullYear());</script> All rights reserved | This template is made with <i class="fa fa-heart-o" aria-hidden="true"></i> by <a href="https://colorlib.com" target="_blank">Colorlib</a> -->
        <!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->

    </footer>
    <!-- ##### Footer Area End ##### -->


    <!-- jQuery (Necessary for All JavaScript Plugins) -->
    <script src="js/jquery/jquery-2.2.4.min.js"></script>
    <!-- Popper js -->
    <script src="js/popper.min.js"></script>
    <!-- Bootstrap js -->
    <script src="js/bootstrap.min.js"></script>
    <!-- Plugins js -->
    <script src="js/plugins.js"></script>
    <!-- Active js -->
    <script src="js/active.js"></script>
    <!-- Index js -->
    <script src="js/diaries.js"></script>

</body>

</html>